import React, { Component } from 'react'
import './Register.css'
import logo from '../../assets/logo.png'
// store
import { connect } from 'react-redux'
import { registerAction } from '../../redux/user/actions'
import store from '../../redux/store'
// api
import { registerAxios } from '../../api/api'
import {
   NavBar, // 顶部标题
   Form, Input, // 表单组件
   Radio, Space, // 单选框
   Button, // 按钮
   Toast, // 提示框
} from 'antd-mobile'

// 注册页面
class Register extends Component {
   state = {
      uname: null, // 用户名
      pass1: null, // 第一次密码
      pass2: null, // 第二次密码
      type: null, // 选中类型
   }
   componentDidMount() {
      store.subscribe(() => {
         this.setState({})
      })
   }
   /* 跳转路由 */
   goTo = (path) => {
      this.props.history.push(path)
   }
   /*  */
   /* 执行注册操作 */
   doRegister = () => {
      // 数据校验
      for(let key in this.state) {
         if (!this.state[key]) return Toast.show({
            content: '请完整填写注册信息'
         })
         if (key === 'pass2' && this.state.pass1 !== this.state[key]) return Toast.show({
            content: '请确保两次输入的密码一致'
         })
      }
      // 提交注册数据给后端
      const obj = {
         username: this.state.uname,
         password: this.state.pass2,
         type: this.state.type
      }
      registerAxios(obj).then(res => {
         if (res.code === 0 && res.data) {
            Toast.show({
               icon: 'success',
               content: '注册成功'
            })
            // 将用户信息存储到状态中
            this.props.registerAction(res.data)
            this.goTo('/home')
         } else {
            Toast.show({
               icon: 'fail',
               content: '该用户已存在'
            })
         }
      })
   }
   /* 存储表单数据 */
   saveFormData = (key, val) => {
      this.setState({...this.state, [key]: val})
   }
   render() {
      const { uname, pass1, pass2, type } = this.state
      return (
         <div className='register'>
            <NavBar backArrow={false}>注册</NavBar>
            <div className="logo">
               <img src={logo} alt="" />
            </div>
            {/* 注册用户的Form表单 */}
            <Form layout='horizontal'>
               <Form.Item label='用户名：' name='uname'>
                  <Input placeholder='请输入用户名' value={uname} onChange={(val) => this.saveFormData('uname', val.trim())} />
               </Form.Item>
               <Form.Item label='密&nbsp;&nbsp; 码：' name='pass1'>
                  <Input placeholder='请输入密码' type='password' value={pass1} onChange={(val) => this.saveFormData('pass1', val.trim())}/>
               </Form.Item>
               <Form.Item label='确认密码：' name='pass2'>
                  <Input placeholder='请再次输入密码' type='password' value={pass2} onChange={(val) => this.saveFormData('pass2', val.trim())}/>
               </Form.Item>
               <Form.Item label='用户类型：' name='type'>
                  <Radio.Group initialValues={type?type:''} onChange={(val) => this.saveFormData('type', val.trim())}>
                     <Space style={{'--gap':'18px'}}>
                        <Radio
                           style={{ '--icon-size': '22px' }}
                           value='dashen'
                        >大神</Radio>
                        <Radio
                           value='laoban'
                           style={{ '--icon-size': '22px' }}
                        >老板</Radio>
                     </Space>
                  </Radio.Group>
               </Form.Item>
               <Button block size='large' 
                  style={{
                  '--background-color': '#118EE8',
                  '--text-color': '#fff'
                  }}
                  onClick={this.doRegister}
               >注册</Button>
               <Button block size='large' style={{'--border-radius':'0px'}} onClick={()=>this.goTo('/login')}>已有账号</Button>
            </Form>
         </div>
      )
   }
}
// 连接
export default connect(
   state => ({state: state.user}),
   { registerAction }
)(Register)